<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝轮播带span</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 200px auto;
            border: 1px solid #000000;
            padding: 5px;
            width: 500px;
            height: 308px;
        }
        .inner{
            width: 500px;
            height: 308px;
            position: relative;
            overflow: hidden;
        }
        ul{
            /*float: left;*/
            list-style: none;
            width: 400%;
            position: absolute;
            left: 0;
        }
        ul li {
            float: left;
        }

        .spanArr{
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .spanArr span{
            display: inline-block;
            height: 16px;
            width: 16px;
            font-size: 14px;
            text-align: center;
            color: black;
            background: aqua;
            cursor:pointer;
        }
        .spanArr .current{
            background: crimson;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="inner">
        <ul id="ul1">
            <li><img src="imgs/1.jpg" alt=""></li>
            <li><img src="imgs/2.jpg" alt=""></li>
            <li><img src="imgs/3.jpg" alt=""></li>
        </ul>
        <div class="spanArr">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
        </div>

    </div>
    <div id="newOl">
        <ol>

        </ol>
    </div>
</div>
<script>
    // 1.获取事件源以及相关
    // 2.绑定事件
    // 3.针对绑定事件添加驱动程序
    //    需求：1.span可以跟随图片轮播
    //         2.做到鼠标放上停止，鼠标移开开始
    var spanArr0=document.getElementsByClassName('spanArr')[0];
    var spanArr1=spanArr0.children;
    var ul1=document.getElementById('ul1');
    var ul1Arr=ul1.children;
    var newLi=ul1Arr[0].cloneNode(true);
    ul1.appendChild(newLi);
    // console.log(newLi);
    // console.log(ul1);
    var j=0;
    var k=0;
     setInterval(autoPlay,1500);
     function autoPlay() {
         k++;
         if (k>2){
             k=0;
         }
         for (var i=0;i<spanArr1.length;i++){
                 spanArr1[i].className='';
             }
             spanArr1[k].className='current';

         j++;
         if (j>3){
             j=1;
             ul1.style.left=0+'px';
         }
             animation(ul1,-500*j);

     }

    function animation(ele,target) {
        // var i=0;
        console.log('我就是来实验的');
        clearInterval(ele.timer);
        var speed=target>ele.offsetLeft?10:-10;

        ele.timer=setInterval(function () {
            ele.style.left=ele.offsetLeft+speed+'px';
            if(Math.abs(target-ele.offsetLeft)<=Math.abs(speed)){
                ele.style.left=target+'px';
                clearInterval(ele.timer);
            }
        },5)

    }
</script>
</body>
</html>